<template>
  <div class="edit-order">
    <el-card class="order-top">
      <el-row>
        <el-col :span="6">订单编号：<span>{{ orderInfo.id }}</span></el-col>
        <el-col :span="6">运单编号：<span v-if="orderInfo.transportOrder">{{ orderInfo.transportOrder.id }}</span></el-col>
        <el-col :span="6">下单时间：<span>{{ orderInfo.createTime }}</span></el-col>
        <el-col :span="6">订单状态：<span v-if="orderInfo.status">{{ orderInfo.status | showOrderStatus }}</span></el-col>
        <el-col :span="6">预计到达日期：<span>{{ orderInfo.estimatedArrivalTime }}</span></el-col>
      </el-row>
    </el-card>
    <el-collapse value="1">
      <el-collapse-item title="基本信息" name="1">
        <el-timeline>
          <el-timeline-item icon="el-icon-location-information">
            <div style="font-size:16px">发货方</div>
            <div style="display:flex;font-size:14px">
              <div>
                <div style="margin:10px 0">发货方姓名：<span style="color:#818693">{{ orderInfo.senderName }}</span></div>
                <div>发货方地址：<span style="color:#818693">{{ senderAddress }}</span></div>
              </div>
              <div style="margin-left:147px">
                <div style="margin:10px 0">发货方电话：<span style="color:#818693">{{ orderInfo.senderPhone }}</span></div>
                <div>详细地址：<span style="color:#818693">{{ orderInfo.senderAddress }}</span></div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-timeline>
          <el-timeline-item icon="el-icon-help">
            <div style="font-size:16px">收货方</div>
            <div style="display:flex;font-size:14px">
              <div>
                <div style="margin:10px 0">发货方姓名：<span style="color:#818693">{{ orderInfo.receiverName }}</span></div>
                <div>发货方地址：<span style="color:#818693">{{ receiverAddress }}</span></div>
              </div>
              <div style="margin-left:147px">
                <div style="margin:10px 0">发货方电话：<span style="color:#818693">{{ orderInfo.receiverPhone }}</span></div>
                <div>详细地址：<span style="color:#818693">{{ orderInfo.receiverAddress }}</span></div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
        <el-timeline>
          <el-timeline-item icon="el-icon-s-flag">
            <div style="font-size:16px">距离：{{ orderInfo.distance }}km</div>
            <div style="font-size:16px;margin-top:20px">备注：暂无</div>
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="订单跟踪" name="1" />
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="订单轨迹" name="1" />
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="取件信息" name="1">
        <el-row>
          <el-col :span="6">所在网点：<span v-if="taskPickup.agency">{{ taskPickup.agency.name }}</span></el-col>
          <el-col :span="6">取件类型：<span>{{ orderInfo.orderType===1?'网点自寄':'上门取件' }}</span></el-col>
          <el-col :span="6">作业状态：<span /></el-col>
          <el-col :span="6">取件快递员：<span v-if="taskPickup.courier">{{ taskPickup.courier.name }}</span></el-col>
          <el-col :span="6">快递员电话：<span v-if="taskPickup.courier">{{ taskPickup.courier.mobile }}</span></el-col>
          <el-col :span="6">预计取件时间：<span>{{ taskPickup.estimatedStartTime }}</span></el-col>
          <el-col :span="6">预计完成时间：<span>{{ taskPickup.estimatedEndTime }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="费用信息" name="1">
        <el-row>
          <el-col :span="8">运费：<span style="font-size: 18px;color: #ffb302;margin-right: 10px;">{{ orderInfo.amount }}</span>元</el-col>
          <el-col :span="8">取件类型：<span>{{ orderInfo.paymentMethod===1?'预结':'到付' }}</span></el-col>
          <el-col :span="8">作业状态：<span>{{ orderInfo.paymentStatus===1?'已付':'未付' }}</span></el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
    <el-collapse value="1">
      <el-collapse-item title="货品信息" name="1">
        <el-table
          :data="cargo"
          stripe
          show-summary
          :header-cell-style="{background:'#f8faff',color:'#818693'}"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="name" label="货品名称">
            <template #default="{row}">
              <el-input v-if="isEdit" v-model="row.name" />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsType" label="货品类型">
            <template #default="{row}">
              <el-select v-if="isEdit" v-model="row.goodsType.id">
                <el-option
                  v-for="item in goodsType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
              <span v-else>{{ row.goodsType.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalWeight" label="重量(千克)">
            <template #default="{row}">
              <el-input v-if="isEdit" v-model="row.totalWeight" />
              <span v-else>{{ row.totalWeight }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="体积(立方)">
            <template #default="{row}">
              <el-input v-if="isEdit" v-model="row.volume" />
              <span v-else>{{ row.volume }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <a href="javascript:void(0);" style="color:#419eff;" @click="edit(row)">{{ isEdit?'保存':'编辑' }}</a>
              <div class="line" />
              <a href="javascript:void(0);" style="color:#f56c6c;">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { editGoodsType, getGoodsType, getOrderCargo, getOrderDetail } from '@/api/business'
import setMap from '@/constant/setMap'

export default {
  filters: {
    showOrderStatus(val) {
      return setMap.orderStatus.find(item => item.id === val).label
    }
  },
  data() {
    return {
      setMap,
      orderInfo: {},
      activeNames: [],
      taskPickup: {},
      cargo: [],
      goodsType: [],
      isEdit: false
    }
  },
  computed: {
    senderAddress() {
      if (!this.orderInfo.senderProvince) return
      return this.orderInfo.senderProvince.name + this.orderInfo.senderCity.name + this.orderInfo.senderCounty.name
    },
    receiverAddress() {
      if (!this.orderInfo.receiverProvince) return
      return this.orderInfo.receiverProvince.name + this.orderInfo.receiverCity.name + this.orderInfo.receiverCounty.name
    }
  },
  created() {
    this.initOrderDetail()
    this.initOrderCargo()
  },
  methods: {
    async initOrderDetail() {
      const res = await getOrderDetail(this.$route.query.orderId)
      this.orderInfo = res
      this.taskPickup = res.taskPickup
    },
    async initOrderCargo() {
      this.cargo = await getOrderCargo(this.$route.query.orderId)
    },
    async edit(row) {
      this.initGoodsType()
      this.isEdit = !this.isEdit
      if (!this.isEdit) {
        await editGoodsType({ ...row, goodsTypeId: row.goodsType.id, orderId: this.$route.query.orderId })
      }
      this.initOrderCargo()
    },
    // 商品类型
    async initGoodsType() {
      this.goodsType = await getGoodsType()
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-order{

    .el-col-6{
      margin: 12px 0;
      font-size: 14px;
      font-weight: normal;
      color: #20232a;
      span{
        color:#818693;
        font-size: 14px;
      }
    }

  .el-card{
    margin: 12px;
    ::v-deep .el-card__body{
      padding: 20px 44px;
    }
  }
  .el-collapse{
    margin: 12px;
   ::v-deep .el-collapse-item__header{
    padding: 0 44px;
    height: 60px;
    line-height: 60px;
    border-radius: 4px 4px 0 0;
    background-color: #f8faff;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    }
    ::v-deep .el-collapse-item__content{
      padding: 24px 40px;
    }
   ::v-deep .el-timeline{
      .el-timeline-item__node--normal{
        top: 5px;
      }
      .el-timeline-item__icon{
        top: 10px;
        color: blue;
        font-size: 16px;
      }
      .el-icon-s-flag{
        color: gold;
      }
      .el-icon-help{
        color: red;
      }
    }
  }
}
</style>
